@import '../../ui/base';

.nav
  position absolute
  right 0
  display flex
  border-radius 4px
  font-size 12px
  box-shadow 0 0 4px rgba(190, 190, 190, .66)
  a
    display block
    width 78px
    height 30px
    display flex
    justify-content center
    align-items center
    background-color #fff
    &:hover
      opacity 1
  li:first-child
    a
      border-top-left-radius 4px
      border-bottom-left-radius 4px
  li + li
    a
      border-top-right-radius 4px
      border-bottom-right-radius 4px
  .active
    background-color #3BA6FF
    color #fff

.root
  clear fix
  > div
    display flex
    flex-direction column
    align-items center
    padding 0 10px

.parent.card
  .progress
    margin-top 18px

.parent-card-wrapper
  position relative
  &::before
    content ''
    position absolute
    width 1px
    height 35px
    border-left 1px dashed #BCC5CE
    left 50%
    bottom 100%
  &.isparent
    &:before
      display none
.card
  display block
  width 268px
  height 180px
  position relative
  color #333
  .amount
    font-size 12px
    margin 10px 0
    line-height 1
    color #777
    max-width 236px
    overflow hidden
    text-overflow ellipsis
    white-space nowrap
  .progress
    span + span
      display none
  hr
    background-color #D8D8D8
    height 1px
    margin 10px -15px
  .last-update
    line-height 1
    font-size 12px
    color #aaa
    margin-top 10px
  .content
    line-height 1.4
    font-size 14px
    height 35px
    color #555
    word-break break-all
    &:hover
      opacity 1
      text-decoration underline
  > div
    padding 10px 15px
    position absolute
    width 100%
    height 100%
    z-index 3
    border-radius 4px
    background-color #fff
    box-shadow 0 0 8px #CAD3DE
    transition box-shadow .2s
  .user
    clear fix
    margin-top 10px
    display flex
    align-items center
    > *
      float left
    .avatar  
      margin-right 5px
    .fullname
      color #555
      font-size 12px
      line-height 1
    .title
      color #bbb
      font-size 12px
      margin-top 5px
      line-height 1
      a
        color #bbb
        &:hover
          opacity 1
          text-decoration underline

.clickable
  position relative
  cursor pointer
  &:hover
    &::before
    &::after
      box-shadow 0 0 8px #90c4ef
    > div
      box-shadow 0 0 10px 0 #90C4EF
  &::before
  &::after
    position absolute
    content ''
    left 50%
    box-shadow 0 0 8px #cad3de
    border-radius 4px
    background-color #fff
  &::before
    width 258px
    height 176px
    margin-left -129px
    top 8px
    z-index 2
  &::after
    width 248px
    height 180px
    margin-left -124px
    top 8px
    z-index 1

.parent.clickable
  &::before
    height 125px
  &::after
    height 129px

.children
  display flex
  justify-content center
  position relative
  @extends $fade-in
  > div
    position relative
  > div + div
    margin-left 20px
    @extends $slide-in-right
  & + .children
    margin-top 40px

.parent  
  height 129px
  @extends $fade-in
  animation-duration .3s

.self
  margin 40px 0 40px 0
  > div
    box-shadow 0 0 10px 0 #90C4EF
    border 1px solid #AFC5E9
  @extends $fade-in

.disable
  .card-top
    margin-top -10px
    margin-bottom -10px
    margin-left -15px
    margin-right -15px
    background #f3f6f9
    padding-left 15px
    padding-right 15px
    padding-bottom 10px
    padding-top 10px

.tip
  position absolute
  left 0
  top 0
  li
    display flex
    align-items center
    color #777777
    font-size 12px
    & + li
      margin-top 15px
    i
      margin-right 10px
      width 10px
      height 10px
    span
      line-height 1
      margin-top 1px

.indicator
  position absolute
  width 3px
  height 25px
  left 0

.indicator-3
  background-color #7AD1AF
.indicator-2
  background-color #FFA45B
